<template>
  <el-scrollbar class="center-canvas">
    <ButtonConfig
      @setting="canvasSetting"
      @enlarge="zoomin"
      @narrow="zoomout"
    />
    <div id="go-view">
      <div
        :style="{
          width: `${canvas.width * 2}px`,
          height: `${canvas.height * 2}px`,
        }"
      >
        <div
          class="canvas"
          ref="dom"
          :style="{
            transform: `scale(${scale})`,
            width: `1920px`,
            height: `1080px`,
          }"
          @mousewheel="canvasWhere"
        >
          <DraggableContainer
            v-if="store.componentList.length > 0"
            :adsorbCols="[10, 20, 30]"
            :adsorbRows="[10, 20, 30]"
            :referenceLineVisible="true"
            referenceLineColor="var(--el-color-primary)"
          >
            <Vue3DraggableResizable
              classNameHandle="my-handle"
              :initW="440"
              :initH="300"
              v-for="(item, index) in store.componentList"
              v-model:x="item.x"
              v-model:y="item.y"
              v-model:w="item.width"
              v-model:h="item.height"
              :draggable="true"
              :resizable="true"
              @activated="print('activated', index)"
              @deactivated="print('deactivated')"
              @drag-start="print('drag-start')"
              @resize-start="print('resize-start')"
              @dragging="print('dragging')"
              @drag-end="print('drag-end')"
              @resize-end="print('resize-end')"
              @resizing="(val) => resizingHandle(val, item)"
              :lockAspectRatio="true"
            >
              <component :is="item.component" :config="item" />
            </Vue3DraggableResizable>
          </DraggableContainer>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
import { DraggableContainer } from "vue3-draggable-resizable";
import { useCanvasStore } from "@/store/canvas";
import { useKeymater } from "@/hooks/useKeymater";
import ButtonConfig from "./ButtonConfig.vue";
const { unbind, bind } = useKeymater();
const store = useCanvasStore();
const dom = ref(); // 画布的dom元素
const scale = ref(0.5); // 画布缩放比例 最大是2， 均分为20份
const canvas = reactive({
  width: 960,
  height: 540,
});

const canvasSetting = () => store.setActiveChartComponentIndex(-1);

// 重置大小
const resizingHandle = ({ w, h }: any, item: any) => {
  item.width = w;
  item.height = h;
};

onUnmounted(() => unbind("delete"));

// 拖动子元素的时候触发
const print = (val: any, index?: number) => {
  if (val === "activated") {
    console.log("激活时");
    unbind("delete");
    if (index !== undefined) {
      bind("delete", () => store.deleteComponent(index));
      // 当前激活的是哪个组件
      store.setActiveChartComponentIndex(index);
    }
  }
};

// 添加画布的滚动效果
const canvasWhere = (event: any) => {
  event.preventDefault();
  let dir = event.deltaY > 0 ? "Up" : "Down";
  dir == "Up" ? zoomout() : zoomin();

  return false;
};

const setCanvasWidthAndHeight = () => {
  canvas.width = 960 * scale.value;
  canvas.height = 540 * scale.value;
};
onMounted(() => {
  setCanvasWidthAndHeight();
});
// 放大
const zoomin = () => {
  dom.value.style.transform = `scale(${scale.value})`;
  scale.value += 0.1; // 每次加0.1， 每个0.1 对应的宽 为96，高54
  if (scale.value >= 2) scale.value = 2;
  setCanvasWidthAndHeight();
};
// 缩小
const zoomout = () => {
  dom.value.style.transform = `scale(${scale.value})`;
  scale.value -= 0.1;
  if (scale.value < 0.5) scale.value = 0.5;
  setCanvasWidthAndHeight();
};
</script>

<style scoped lang="scss">
@import "../hdr.scss";

.parent {
  width: 100%;
  height: 100%;
  position: relative;
}

.center-canvas {
  width: 100%;
  height: calc(100vh - 60px);
  box-shadow: 0 0 10px #eee inset;
  background: radial-gradient(circle at 10px 10px, #898998 1px, transparent 0);
  background-size: 13px 13px;
  padding: 13px;
  box-sizing: border-box;
  position: relative;
  cursor: move;

  .canvas {
    background-color: #fafafa;
    box-sizing: border-box;
    box-shadow: 0 0 6px 2px #eee;
    transform-origin: 0% 0%;
    position: absolute;
  }
}

.help-bar {
  position: fixed;
  height: 200px;
  padding: 15px 0px;
  background-color: #fff;
  box-shadow: 0 0 10px #ccc;
  border-radius: 3px;
  right: 382px;
  top: 62px;
}
</style>
